<template>
	<view class="add" style="background-color: #fff;">
		<view class="pl30">
			<view class="color fs40 fw900">在线充值</view>
			<view class="box bgColor mt30 posir">
				<view class="fw900 fs50 white pt30 pl40">￥150.00</view>
				<view class="fw500 fs30 white pl40 mb32 mt10">我的余额(元)</view>
				<lines></lines>
				<view class="img mt30 dflex jcsb alc">
					<view class="dflex alc">
						<image src="../../static/change.png" mode=""></image>
						<text class="fs30 white fw500 ml10">充值记录</text>
					</view>
					<view class="dflex alc">
						<image src="../../static//money.png" mode=""></image>
						<text class="fs30 white fw500 ml10">交易记录</text>
					</view>
				</view>
				<view class="bgimg"></view>
			</view>
			<!-- 充值金额 -->
			<view class="addmoney mt50">
				<subtitle title="充值金额"></subtitle>
				<view class="dflex money-item jcsa pr30 mt40">
					<view
						v-for="(item, index) in moneyList"
						:key="item.id"
						class="textc fw900 mb20"
						:class="selected == index ? 'selected' : ''"
						@click="changeActive(index)"
					>
						{{ item.money + '元' }}
					</view>
				</view>
				<!-- 支付方式 -->
				<view class="pay mt30">
					<subtitle title="支付方式"></subtitle>
					<view class="paywx dflex alc jcsb pl10 mt40" @click="changeType">
						<view class="dflex alc">
							<image src="../../static/pay.png"></image>
							<text class="ml20">微信支付</text>
						</view>
						<view class="dflex alc pr30">
							<image v-if="type" src="../../static/success.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="btn textc white fs36 fw900">立即充值</view>
		</view>
		<tabbar :select="1"></tabbar>
	</view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar.vue';
import lines from '@/components/lines/lines.vue';
import subtitle from '@/components/subtitle/subtitle.vue';
export default {
	components: { tabbar, lines, subtitle },
	data() {
		return {
			type: false,
			selected: 0,
			moneyList: [
				{
					id: 1,
					money: 100
				},
				{
					id: 2,
					money: 200
				},
				{
					id: 3,
					money: 300
				},
				{
					id: 4,
					money: 400
				},
				{
					id: 5,
					money: 500
				},
				{
					id: 6,
					money: 1000
				}
			]
		};
	},
	methods: {
		changeActive(index) {
			this.selected = index;
		},
		changeType() {
			this.type = !this.type;
		}
	},
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.box {
	width: 690rpx;
	height: 286rpx;
	box-shadow: 0px 4px 16px 0px rgba(65, 81, 219, 0.8);
	opacity: 1;
	border-top-right-radius: 60rpx;
}
.img {
	& > view {
		padding-left: 60rpx;
		padding-right: 60rpx;
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
}
.bgimg {
	width: 262rpx;
	height: 240rpx;
	background-image: url('../../pagesA/images/Mask group@2x.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -15rpx;
	right: -18rpx;
}
.money-item {
	flex-wrap: wrap;
	& > view {
		width: 204rpx;
		height: 100rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 2rpx solid #efefef;
		color: #666;
		line-height: 100rpx;
	}
}
.selected {
	width: 204rpx;
	height: 100rpx;
	background: #e6eeff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	color: #4151db !important;
	border: 2rpx solid #4151db !important;
}
.paywx {
	& > view:nth-child(1) {
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	& > view:nth-child(2) {
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}
}
.btn {
	width: 690rpx;
	height: 110rpx;
	line-height: 100rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(65, 81, 219, 0.8);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	position: fixed;
	bottom: 150rpx;
}
</style>
